<template>
	<el-scrollbar height="100vh">
	<div>
		<el-container>
			<el-table :data="tableData.records" :header-cell-style="{color:'#383838'}">
				<el-table-column type="expand">
					<template #default="scope">
						<el-form label-width="100" inline>
							<el-form-item label="省">{{scope.row.province}}</el-form-item>
							<el-form-item label="市">{{scope.row.city}}</el-form-item>
							<el-form-item label="县">{{scope.row.county}}</el-form-item>
							<el-form-item label="乡">{{scope.row.township}}</el-form-item>
							<el-form-item label="村">{{scope.row.village}}</el-form-item>
						</el-form>
					</template>
				</el-table-column>
			<el-table-column label="核实员" prop="vname"></el-table-column>
			<el-table-column label="家庭编号" prop="fid"></el-table-column>
			<el-table-column label="人力风险">
				<template #default="scope">
					<span v-if="scope.row.riskMan">是</span>
					<span v-else>否</span>
				</template>
			</el-table-column>
			<el-table-column label="物质风险">
				<template #default="scope">
					<span v-if="scope.row.riskSubstance">是</span>
					<span v-else>否</span>
				</template>
			</el-table-column>
			<el-table-column label="自然风险">
				<template #default="scope">
					<span v-if="scope.row.riskNature">是</span>
					<span v-else>否</span>
				</template>
			</el-table-column>
			<el-table-column label="金融风险">
				<template #default="scope">
					<span v-if="scope.row.riskFinance">是</span>
					<span v-else>否</span>
				</template>
			</el-table-column>
			<el-table-column label="社会风险">
				<template #default="scope">
					<span v-if="scope.row.riskSocial">是</span>
					<span v-else>否</span>
				</template>
			</el-table-column>
			<el-table-column label="风险级别" prop="riskLevel"></el-table-column>
			<el-table-column label="风险备注" prop="riskRemark"></el-table-column>
			<el-table-column label="是否核实" prop="verify"
			:filters="[
				{ text: '已核实',value: true },
				{ text: '未核实',value: false }
			]"
			:filter-method="filterVerify"
			filter-placement="bottom-end"
			>
				<template #default="scope">
					<el-tag type="success" v-if="scope.row.verify">已核实</el-tag>
					<el-tag type="info" v-else>未核实</el-tag>
				</template>
			</el-table-column>
			<el-table-column width="180" label="操作">
				<template #default="scope">
					<template v-if="scope.row.valid">
						<el-button type="primary" :icon="Update" plain size="small" @click="update(scope.row.id)">修改</el-button>
						<el-button type="warning" v-if="!scope.row.verify" plain size="small"
						 @click="verify(scope.row.id, 1,scope.row.valid)">核实</el-button>
					</template>
				</template>
			</el-table-column>
	        </el-table>
        </el-container>
		<el-pagination
				style="margin-top: 10px;"
				background
				v-model:current-page="params.pageNo"
				:page-count="tableData.pages"
				:total="tableData.total"
				@current-change="getTableData"
				hide-on-single-page/>
		<el-dialog
				v-model="dialog.show"
				:title="dialog.title"
				width="450px"
				:close-on-click-modal="false">
		  <Add
				v-if="dialog.show"
				@getTableData="getTableData"
				v-model:show="dialog.show"
				:id="dialog.id"/>
		</el-dialog>
	</div>
	</el-scrollbar>
</template>

<script setup>
	import { get, post } from '@/axios'
	import { ref, reactive } from 'vue'
	import url from './util'
	import Add from './add'
	import Update from '@/components/icons/update'
	import { userIdStore } from '@/stores'
import { column } from 'element-plus/es/components/table-v2/src/common'
	const idStore = userIdStore()
	const dialog = reactive({
		show: false,
		title: '',
		id: null
	})
	const tableData = reactive({
		records: [],
		pages: 0,
		total: 0
	})
	const params = reactive({
		pageNo: 1,
		pageSize: 9,
		verifierId: idStore.userId
	})
	getTableData()
	function getTableData () {
		get('/clue/recordList', params, content => {
			tableData.records = content.records
			tableData.pages = content.pages
			tableData.total = content.total
		})
	}
	function update(id) {
		dialog.title = '修改线索'
		dialog.id = id
		dialog.show = true
	}
	function verify (id, verify, valid) {
			const text = verify ? '确定已经核实该线索吗?' : '确定该线索还未核实正确吗'
			ElMessageBox.confirm(text, '警告', {
				type: 'warning'
			}).then(() => {
				post(url.verify, { id, verify ,valid}, content => {
					getTableData()
				})
			}).catch(() => {})
	}
	const filterVerify = (value, row) => {
		return row.verify === value
	}
	const filterHandler = (value, row, column) => {
		const property = column.property
		return row[property] === value
	}
</script>

<style scoped lang="scss">
</style>